<template>
    <main-layout title="项目管理" :showHome="true" :showNew="true" @newEvent="toNewPage">
        <ul @scroll="scrollEvt" class="page-list-box">
            <li class="item" v-for="item in list" :key="item.id">
                <span class="span itemTitle">{{item.name}}</span>
                <span class="span">负责人：{{item.liableName}}</span>
                <span class="span">签订日期： {{item.signTime | df('MM月dd日 hh时mm分')}}</span>
                <span class="span">地址：{{item.county}}</span>
                <div class="opt">
                    <i @click="toNewPage(item)"></i>
                    <i class="del"></i>
                </div>
            </li>
            <li>
                <span v-if="loading" class="loading">加载中...</span>
                <!-- 加载完成以后，如果有更多数据，则显示第一个，否则显示第二个 -->
                <span v-if="!loading && hasMore" class="loading">上滑加载更多</span>
                <span v-if="!loading && !hasMore" class="loading">我是有底线的</span>
            </li>
        </ul>
    </main-layout>
</template>

<script>
import { projectListApi } from '../../apis/projectApi'
export default {
  data () {
    return {
      list: [],
      page: 1,
      size: 5,
      loading: true,
      // 定义后端是否还有数据的标识
      hasMore: true
    }
  },
  computed: {
    userRight () {
      return this.$store.getters['common/userRights']
    }
  },
  created () {
    this.getList()
  },
  // 过滤器
  filters: {

  },
  methods: {
    // 新增事件，判断用户是否有权限
    toNewPage (row) {
      // 判断是编辑(true)还是新增(false)
      const isEdit = !!row

      const right = this.userRight.find(it => it.id === 'PROJECT-01-01')
      // 有权限功能
      if (right) {
        // 是新增 && 有'C'权限
        if (!isEdit && right.role.includes('C')) {
          this.$router.push({ name: 'editProject', query: { from: 'list' } })
        } else {
          // 是编辑 && 有'C'权限
          if (!!isEdit && right.role.includes('C')) {
            this.$router.push({ name: 'editProject', query: { id: row.id, from: 'list' } })
          } else {
            this.$toast.fail('您没有这个权限')
          }
        }
      } else {
        this.$toast.fail('您没有这个权限')
      }
    },
    async getList () {
      const result = await projectListApi({ name: '', page: this.page, size: this.size })
      if (result.code === 200) {
        this.list = this.list.concat(result.data.rows)
        // 计算hasMore的值：当前页树 * 每页展示的条数 要小于 后端总条数 才有更多数据，还没有从后端获取回来
        this.hasMore = this.page * this.size < result.data.total
      }

      setTimeout(() => {
        this.loading = false
      })
    },
    scrollEvt (evt) {
      // 需要计算页面滚动到哪个位置了
    //   console.log(evt.target.offsetHeight, evt.target.scrollHeight, evt.target.scrollTop)
      const isBottom = (evt.target.scrollHeight - evt.target.offsetHeight - evt.target.scrollTop - 20) < 0
      // 实现一个节流，当滚动到底部，并且数据没有处于加载状态，才执行获取操作
      // 在后端没有更多数据的情况下，任何时候都不能加载
      if (isBottom && !this.loading && this.hasMore) {
        // 把变量设置为加载中
        this.loading = true
        // 加载下一页数据
        this.page += 1
        // 调用数据请求方法
        this.getList()
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import '../../style/common.less';

</style>
